<!-- 日常统计 -->
<template>
    <div >
        <el-form :inline="true" class="demo-form-inline" style="text-align:center">
            <el-form-item label="时间范围">
                <el-date-picker
                    v-model="beginTime"
                    align="right"
                    type="date"
                    placeholder="开始"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-form-item>
            <el-form-item label="-">
                <el-date-picker
                    v-model="endTime"
                    align="right"
                    type="date"
                    placeholder="结束"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                ></el-date-picker>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getAllStatistics">查询</el-button>
            </el-form-item>
        </el-form>

        <div class="chart-container">
            <div id="chart" class="chart" style="height:95%;width:100%" />
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import echarts from "echarts";
import { getAllStatistics } from "@/api/statistic/daily";
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            //statistisData: [],
            beginTime: "",
            endTime: "",
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        },
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        },
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        },
                    },
                ],
            },
            statisticDate: [],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        getAllStatistics() {
            getAllStatistics(this.beginTime, this.endTime).then((response) => {
                this.statisticDate = response.data.statistic;
                this.setChart();
            });
        },
        setChart() {
            var chartDom = document.getElementById("chart");
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                backgroundColor: "#394056",
                title: {
                    top: 20,
                    text: "每日流量",
                    textStyle: {
                        fontWeight: "normal",
                        fontSize: 16,
                        color: "#F1F1F3",
                    },
                    left: "1%",
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: "#57617B",
                        },
                    },
                },
                legend: {
                    top: 20,
                    icon: "rect",
                    itemWidth: 14,
                    itemHeight: 5,
                    itemGap: 13,
                    data: ["注册量", "登录量", "视频播放量", "课程新增量"],
                    right: "4%",
                    textStyle: {
                        fontSize: 12,
                        color: "#F1F1F3",
                    },
                },
                grid: {
                    top: 70,
                    left: "2%",
                    right: "2%",
                    bottom: "6%",
                    containLabel: true,
                },
                toolbox: {
                    feature: {
                        saveAsImage: {},
                    },
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    axisLine: {
                        lineStyle: {
                            color: "#57617B",
                        },
                    },
                    data: this.statisticDate.map((item) => {
                        return item.dateCalculated;
                    }),
                },
                yAxis: {
                    type: "log",
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#57617B",
                        },
                    },
                    axisLabel: {
                        margin: 10,
                        textStyle: {
                            fontSize: 14,
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#57617B",
                        },
                    },
                },
                series: [
                    {
                        name: "注册量",
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(137, 189, 27, 0.3)",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(137, 189, 27, 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                                shadowBlur: 10,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "rgb(137,189,27)",
                                borderColor: "rgba(137,189,2,0.27)",
                                borderWidth: 12,
                            },
                        },
                        data: this.statisticDate.map((item) => {
                            return item.registerNum;
                        }),
                    },
                    {
                        name: "登录量",
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(0, 136, 212, 0.3)",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(0, 136, 212, 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                                shadowBlur: 10,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "rgb(0,136,212)",
                                borderColor: "rgba(0,136,212,0.2)",
                                borderWidth: 12,
                            },
                        },
                        data: this.statisticDate.map((item) => {
                            return item.loginNum;
                        }),
                    },
                    {
                        name: "视频播放量",
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(219, 50, 51, 0.3)",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(219, 50, 51, 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)",
                                shadowBlur: 10,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "rgb(219,50,51)",
                                borderColor: "rgba(219,50,51,0.2)",
                                borderWidth: 12,
                            },
                        },
                        data: this.statisticDate.map((item) => {
                            return item.videoViewNum;
                        }),
                    },
                    {
                        name: "课程新增量",
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 5,
                        showSymbol: false,
                        lineStyle: {
                            normal: {
                                width: 1,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                            offset: 0,
                                            color: "rgba(164, 104, 187, 0.4)",
                                        },
                                        {
                                            offset: 0.8,
                                            color: "rgba(164, 104, 187, 0)",
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.2)",
                                shadowBlur: 10,
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "rgb(164, 104, 187)",
                                borderColor: "rgba(164, 104, 187,0.2)",
                                borderWidth: 12,
                            },
                        },
                        data: this.statisticDate.map((item) => {
                            return item.courseNum;
                        }),
                    },
                ],
                dataZoom: [
                    {
                        show: true,
                        height: 20,
                        xAxisIndex: [0],
                        bottom: 10,
                        start: 10,
                        end: 80,
                        handleIcon:
                            "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
                        handleSize: "110%",
                        handleStyle: {
                            color: "#d3dee5",
                        },
                        textStyle: {
                            color: "#fff",
                        },
                        borderColor: "#90979c",
                    },
                    {
                        type: "inside",
                        show: true,
                        height: 15,
                        start: 1,
                        end: 35,
                    },
                ],
            };

            myChart.setOption(option);
        },
    },

    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getAllStatistics();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
.chart-container {
    position: relative;
    width: 100%;
    height: calc(100vh - 80px);
}
</style>